.keyboard{
  // border: 1px solid red;
  width: 180px;
  height: 120px;
  margin-top: 20px;
  margin-left: 20px;
  display: flex;
  flex-direction: column;
  border: 1px solid #bab5b5;
  border-radius: 5px;
  .row{
    display: flex;
    flex-direction: row;
    flex: 1;
    &:last-of-type{
      .col{
        border-bottom: none;
      }  
    }
    .col{
      flex: 1;
      color: #333;
      font-size: 12px;
      border-right: 1px solid #bab5b5;
      border-bottom: 1px solid #bab5b5;
      display: flex;
      justify-content: center;
      align-items: center;
      font-weight: bold;
      span{
        width: 30px;
        text-align: center;
        // background: red;
      }
      &:last-of-type{
        border-right: none;
      }
      &:active{
        background: rgb(149, 149, 149);
        color: #eee;
      }
    }
    .active{
      background: rgb(149, 149, 149);
      color: #eee;       
    }
  }
}